<!DOCTYPE html>
  <head>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jsPlumb-2.0.7-min.js"></script>
  
    <link rel="stylesheet" href="css/jsPlumbToolkit-defaults.css" />
    <style type="text/css">
      .item {
	    position: absolute;
        border: 1px solid black;
        background-color: #ddddff;
      }
      #container {
        border: 1px solid gray;
        width: 500px;
        height: 500px;
      }
	  
	.title {
	  padding: 10px;
	  cursor: move;
	}
		
	.connect {
	  width: 100%;
	  height: 20px;
	  background-color: white;
	  cursor: pointer;
	}
    </style>

    <title>Getting started with jsPlumb</title>
  </head>  

  <body>
    <div id="container"></div>
  </body>
  
  <script type="text/javascript">
	jsPlumb.ready(function() {
	  jsPlumb.setContainer($('#container'));
	
	  var i = 0;
	  $('#container').dblclick(function(e) {
		var newState = $('<div>').attr('id', 'state' + i).addClass('item');
		
		var title = $('<div>').addClass('title').text('State ' + i);
		var connect = $('<div>').addClass('connect');
		
		newState.css({
		  'top': e.pageY,
		  'left': e.pageX
		});
		
		newState.append(title);
		newState.append(connect);
		
		$('#container').append(newState);
		
		jsPlumb.makeTarget(newState, {
		  anchor: 'Continuous'
		});
		
		jsPlumb.makeSource(connect, {
		  parent: newState,
		  anchor: 'Continuous'
		});		
		
		jsPlumb.draggable(newState, {
		  containment: 'parent'
		});
		newState.dblclick(function(e) {
		  jsPlumb.detachAllConnections($(this));
		  $(this).remove();
		  e.stopPropagation();
		});		
		
		i++;    
	  });  
	});  
  </script>
